<!--todo 子组件，折线图-->
<template>
    <div class="childrenBox cb-2">
        <div class="textA">
            <p>访问量</p>
            <a class="el-icon-setting"></a>
        </div>
        <div class="textB">
            <p>{{views}}</p>
        </div>
        <div class="textC" id="textC">

        </div>
        <div class="textD">
            <p>日访问量 {{(views)/3}}</p>
        </div>
    </div>
</template>

<script>
    import {getAccessData} from "../../api/access_api";

    export default {
        name: "progressBar",
        data() {
            return {
                views: 0,
            }
        },
        created() {
        },

        methods: {

            findAccessData() {
                getAccessData().then(res => {
                    let data1 = res.data;
                    let data2 = data1.data;
                    for (let i = 0; i < data2.length; i++){
                        this.views = this.views + data2[i].visits
                    }
                }).catch(err => {
                    console.error("err:::",err)
                })


            },


        },

        mounted() {


            this.findAccessData()


            // eslint-disable-next-line no-undef,no-unused-vars
            var myChart = this.$echarts.init(document.getElementById('textC'));

            // 指定图表的配置项和数据
            // eslint-disable-next-line no-unused-vars
            // xAxis. show = true
            var option = {
                tooltip: {
                    //鼠标悬停提示内容
                    trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item

                },

                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    show: false,
                    type: 'value'
                },
                series: [{
                    trigger: 'axis',
                    data: [80, 93, 211, 143, 77, 46, 234, 55, 35, 234, 123, 321],
                    type: 'line',
                    areaStyle: {},
                    // 显示数值
                    // itemStyle : { normal: {label : {show: true}}}
                }]

            };
            option && myChart.setOption(option);


        }

    }
</script>

<style scoped>
    p {
        padding: 0;
        margin: 0;
    }

    .childrenBox {
        flex: 1;
        background: #fff;
        height: 220px;
        width: 300px;
        margin: 25px;
    }

    .textA {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        color: #8c8c8c;
    }

    .textA a {
        margin-top: 4px;
    }

    .textB {
        width: 100px;
        font-size: 35px;
        margin-left: 15px;
    }

    .textC {
        display: flex;
        justify-content: space-between;
        height: 60px;
        width: 300px;
        margin: 15px;
        border-bottom: 1px solid #b8ceef;
    }

    .textD p {
        display: flex;
        margin-left: 15px;
    }
</style>
